<html>
  <head>
    <meta charset="utf-8">
    <title>web字体加密</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="../assets/style.css" />
    <style>
      .title {
        font-weight: 900;
        font-size: 50px;
        font-family: "黑体";
        color: #898989;
        background: 
        -webkit-linear-gradient(45deg, #39eef6, #f86527, #fcd72d, #5f2cf8, #bed5f5);
        color: transparent;
        /*设置字体颜色透明*/
        -webkit-background-clip: text;
        /*背景裁剪为文本形式*/
        animation: ran 5s linear infinite;
        /*动态10s展示*/
      }
      @keyframes ran {
        from {
          backgroud-position: 0 0;
        }
        to {
          background-position: 2000px 0;
        }
      }
    </style>
  </head>
  <body>
    <div style="margin: 50px auto 0 auto;width: 500px;">
      <h2 class="title">大家一起来找茬</h2>
      <ul>
        <li style="margin-bottom: 100px;">
          <a class="title" href="numRender.html">数字加密</a>
        </li>
        <li>
          <a class="title" href="charRender.html">文字加密</a>
        </li>
      </ul>
    </div>
  </body>
</html>